/*
Copyright  2018 Blockchain Technology and Application Joint Lab, Fintech Research Center of ISCAS.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
 */
import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
import {Users} from '../api/users/users.js';
import {CopyrightCertificates} from '../api/copyright_certificates/copyright_certificates.js';
import {browserHistory} from 'react-router';
import Snackbar from 'material-ui/Snackbar';

import {List, ListItem} from 'material-ui/List';
import InfiniteScroll from 'react-infinite-scroller';

import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import NavigationLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left';
import AppBar from 'material-ui/AppBar';

import TextField from 'material-ui/TextField';

import moment from 'moment';

let faker = require('faker/locale/zh_CN');

const styles = {
    toolbar: {
        position: 'fixed',
        top: 0,
        width: '100%',
    },
    dlg: {
        width: '100%',
        maxWidth: 'none',
    }
}

export class Tab1List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 0,
            picPos: 0,
            hasMore: true,
            items: [],
            ch: 0,
            dlg_open_view: false,
            dlg_open_action1: false,
            dlg_open_action2: false,
            snack_open: false,
            snack_msg: '',
        };

        this.Logged = (props) => (
            <IconMenu
                {...props}
                iconButtonElement={
                    <IconButton><MoreVertIcon/></IconButton>
                }
                targetOrigin={{horizontal: 'right', vertical: 'top'}}
                anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            >
                <MenuItem primaryText="图片浏览"
                          onTouchTap={(e) => {
                              if(this.props.certificate.picture_desc.pic_show != undefined && this.props.certificate.picture_desc.pic_show!='' && this.props.certificate.picture_desc.pic_show.search('http')>-1)
                                  window.open(this.props.certificate.picture_desc.pic_show)
                              this.setState({dlg_open_action1: true})
                          }}
                />
                {this.props.myImages? null:<MenuItem primaryText="购买图片"
                          onTouchTap={e => this.setState({
                              dlg_open_action2: true,
                              u_userId: faker.finance.bitcoinAddress(),
                              u_avatar: faker.image.avatar(),
                          })}
                />}
            </IconMenu>
        );
        this.Logged.muiName = 'IconMenu';

    }

    componentDidMount(x, y, z) {
        this.setState({cw: window.innerWidth, ch: window.innerHeight});
    }

    renderAppBar() {
        if (this.props.handleClose) {
            return (
                <AppBar title="版权信息"
                        style={styles.toolbar}
                        iconElementRight={<this.Logged/>}
                        iconElementLeft={
                            <IconButton
                                onTouchTap={this.props.handleClose}
                                iconStyle={{width: 48, height: 48}}
                                style={{padding: 0,}}
                            ><NavigationLeft/></IconButton>
                        }
                />
            );
        } else return '';
    }

    render() {
        let cer_number, pic_identity, pic_desc, pic_author, pic_name, pic_des, pic_size, owner_name, owner_account_address,
            cer_status, cer_time;
        if (this.props.certificate.certificate_number && this.props.owner) {
            cer_number = this.props.certificate.certificate_number;
            pic_identity = this.props.certificate.picture_digital_identity;
            pic_desc = this.props.certificate.picture_desc;
            pic_author = pic_desc.author;
            pic_name = pic_desc.name;
            pic_des = pic_desc.desc;
            pic_size = pic_desc.size;
            owner_name = this.props.owner.name;
            owner_account_address = this.props.certificate.owner_account_address;
            cer_status = this.props.certificate.status ? "已上链确认" : "待上链确认";
            cer_time = this.props.certificate.block_timestamp > 0 ?
                moment(this.props.certificate.block_timestamp * 1000).format()
                : '等待中···';
        }

        return (
            <div>
                {this.renderAppBar()}
                <div id='certificate' style={{height: this.state.ch, overflowY: 'auto', wordWrap: 'break-word'}}>
                    <h2 style={{marginTop: 145, textAlign: 'center'}}>版权登记证书</h2>
                    <List style={{marginTop: '1em', marginBottom: '4em', marginLeft: 10}}>
                        <ListItem primaryText={"登记编号: "} secondaryText={cer_number} secondaryTextLines={2}/>
                        <ListItem primaryText={"图片标识: "} secondaryText={pic_identity} secondaryTextLines={2}/>
                        <ListItem primaryText={"作品名称: " + pic_name}/>
                        <ListItem primaryText={"作品描述: " + pic_des}/>
                        <ListItem primaryText={'作者: ' + pic_author}/>
                        <ListItem primaryText={'著作权人: ' + owner_name}/>
                        <ListItem primaryText={'著作权人编号: '} secondaryText={owner_account_address}/>
                        <ListItem primaryText={"证书状态: " + cer_status}/>
                        <ListItem primaryText={'登记时间: ' + cer_time}/>
                    </List>
                </div>
            </div>
        );
    }
}

Tab1List.propTypes = {
    certificate: PropTypes.object.isRequired,
    owner: PropTypes.object.isRequired,
};

export default createContainer(props => {
    if (!props.certificate) {
        return {query: {}};//throw new Meteor.Error('Invalid props.certificatei_number: ');
    }
    else {
        return {
            query: {}
        }
    }
}, Tab1List);